<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>会员等级</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no" />
<jsp:include page="/jsp/inc_head.jsp"></jsp:include>
<style>
</style>
</head>

<body style="padding-bottom:50px;">
<input type="hidden" id="tab">
<div class="am-g">
	<div class="am-u-sm-12 am-pad-none hydj_top">
    	<div class="am-u-sm-8">
    	<span class="hydj_jyz">经验值&nbsp;&nbsp;${pbuyer.experienceValue}</span>
        <span class="hy_level">V${pbuyer.grade}</span>
        </div>
        <div class="am-u-sm-4 am-text-center">
        	<a href="javascript:" class="dj_rule">等级规则</a>
        </div>
    </div>
</div>
<div class="am-g">
	<ul class="am-u-sm-12 am-pad-none hydj_midbg">
    	<li class="am-u-sm-4 am-pad-none am-text-center hydj_lei" onClick="query();">
        	全部
        </li>
    	<li class="am-u-sm-4 am-pad-none am-text-center hydj_lei add_opacity" onClick="query(1);">
        	获取
        </li>
    	<li class="am-u-sm-4 am-pad-none am-text-center hydj_lei add_opacity" style="border-right:0;" onClick="query(2);">
        	消耗
        </li>
    </ul>
    <div class="am-u-sm-12 hydian clear">
        <div class="hydianulup">
            <ul>
                <c:forEach items="${min_rating_list}" var="type">
					<li class="opa1" style="width:${width}">${type.experience }</li>
				</c:forEach>
				<c:forEach items="${max_rating_list}" var="type">
					<li style="width:${width}">${type.experience }</li>
				</c:forEach>
				<li style="width:${width}">${pmemberRating.experience }</li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="dianjdt" id="probar">
            <div id="line" style="width:${raty}"></div>
        </div>
        <div class="hydianul">
            <ul>
                <li class="opa1" style="width:${width3}">v0</li>
                <c:forEach items="${min_rating_list}" var="type">
					<li class="opa1" style="width:${width2}">v${type.memberRating }</li>
				</c:forEach>
				<c:forEach items="${max_rating_list}" var="type" >
					<li style="width:${width2}">v${type.memberRating }</li>
				</c:forEach>
				<li style="width:5%">v${pmemberRating.memberRating }</li>
                <div class="clear"></div>
            </ul>
        </div>
    </div>
    <div class="am-u-sm-12 am-pad-none am-text-center hydj_jytip" id="nextNote">
    	差&nbsp;<span class="jy_col" id="nextExp"></span><span class="jy_col" id="nextExp">经验</span>&nbsp;值升级到<span class="jy_col">v</span><span class="jy_col" id="nextGrade"></span>会员，新特权在等你
    </div>
    <div class="am-u-sm-12 am-pad-none">
    	<div id="his"></div>
    </div>
</div>
<jsp:include page="/jsp/inc_bottom.jsp"></jsp:include>
<script>
var ajaxpath="${pageContext.request.contextPath}";

$(function(){
	$(".hyjf_hide").html("&nbsp;");
	queryNextRating();
	//queryRaty('${pbuyer.experienceValue}');
	query("");
});

function queryNextRating(){
	var experienceValue=${pbuyer.experienceValue};
	var memberRating=${pbuyer.grade};
	var url=ajaxpath+"/memberRating/queryNextRating.do?memberRating="+memberRating;
	 $.get(url,function(data){
 		if(data!=null&&data!=""){
	 		$("#nextExp").val(data.experience-experienceValue);$("#nextExp").html(data.experience-experienceValue);
	 		$("#nextGrade").val(memberRating+1);$("#nextGrade").html(memberRating+1);
	 	}else{
	 		$("#nextNote").html("您已到最高会员等级！");
	 	}
	 });
}

function queryExperienceHis(){
	var tab=$("#tab").val();
	ajax=true;
	page=1;
	var url = ajaxpath+"/memberRating/queryMemberRatingHisList.do?page="+page+"&tab="+tab;	
	$.get(url,function(rate_his_list){
		var html="";
		var i = 0;
		$.each(rate_his_list,function(){
			 html+='<div class="am-u-sm-12 hydj_jygetlie">'+
			        	'<div class="am-u-sm-5 am-pad-none">'+
			            	'<div class="hy_jynum">经验&nbsp;'+rate_his_list[i].experience+'</div>'+
			            '</div>'+
			            '<div class="am-u-sm-7 am-pad-none am-text-right">';
			 			if(rate_his_list[i].type==1){
			 				html+='<div>+'+rate_his_list[i].experience+'</div>';
			 			}else if(rate_his_list[i].type==2){
			 				html+='<div>-'+rate_his_list[i].experience+'</div>';
			 			}
			      html+='<div class="hy_jyget">'+rate_his_list[i].createTime+'</div>'+
			            '</div></div>';
			i++;
		});
		$("#his").html(html);
	});
	/** 下拉时调用 再次加载 8 条商品*/
	$(window).scroll(function()
	{
		if (($(window).scrollTop() + $(window).height() >= $(document).height()- 50)
				&& ajax == true)
		{
			page++;
			ajax = false;
			ajaxExperienceHis(page);
		}
	});
	function ajaxExperienceHis(page)
	{
		var tab=$("#tab").val();
	    var url = ajaxpath+"/memberRating/queryMemberRatingHisList.do?page="+page+"&tab="+tab;	
		$.get(url, function(rate_his_list)
		{
		//console.log("查询商品结束："+new Date());
			var size = rate_his_list.length;
			if (size > 0)
			{
				for (var i = 0; i < size; i++)
				{
					appendExperienceHis(rate_his_list[i],i);
				}
				//console.log("加载商品商品结束："+new Date());
				ajax = true;
			}
		});
	}
	function appendExperienceHis(data,i){
		var html="";
		var j=page*6+i;
		html+='<div class="am-u-sm-12 hydj_jygetlie">'+
			        	'<div class="am-u-sm-5 am-pad-none">'+
			            	'<div class="hy_jynum">经验&nbsp;'+data.experience+'</div>'+
			            '</div>'+
			            '<div class="am-u-sm-7 am-pad-none am-text-right">';
			 			if(data.type==1){
			 				html+='<div>+'+data.experience+'</div>';
			 			}else if(data.type==2){
			 				html+='<div>-'+data.experience+'</div>';
			 			}
			      html+='<div class="hy_jyget">'+data.createTime+'</div>'+
			            '</div></div>';
		$("#his").append(html);
	}
	
}

function query(i){
	$("#tab").val(i);
	queryExperienceHis();
}

/* function queryRaty(experienceValue){
	var url = ajaxpath+"/memberRating/queryRatingList.do?experienceValue="+experienceValue;	
	$.get(url,function(min_rating_list){
	}); 
} */
</script>

<script>
$(".hydj_midbg > li").click(function(){
	$(".hydj_midbg > li").not(".add_opacity").addClass("add_opacity");
	$(this).removeClass("add_opacity");
});
</script>
</body>
</html>
